<template>
  <div class="AdvertSpaceIndex">
    <el-card class="box-card">
      <div slot="header" class="clearfix flex">
        <el-tabs v-model="activeName">
          <el-tab-pane label="轮播图" name="1"></el-tab-pane>
          <el-tab-pane label="新上好课" name="2"></el-tab-pane>
          <el-tab-pane label="进站必学" name="3"></el-tab-pane>
          <el-tab-pane label="学习路线" name="4"></el-tab-pane>
        </el-tabs>
        <div style="display: flex">
          <el-select
            v-if="activeName != '1'"
            v-model="addCourseType"
            placeholder="请选择"
            style="margin-right: 20px"
            @change="loadAllAdv"
          >
            <el-option
              v-for="(item, index) in [
                '推荐',
                '前端开发',
                '后端开发',
                '移动开发',
                '计算机基础',
              ]"
              :key="index"
              :label="item"
              :value="item"
            >
            </el-option>
          </el-select>
          <el-button @click="handleCreate">添加课程广告</el-button>
        </div>
      </div>
      <!-- 底部菜单列表展示区域 -->
      <el-table :data="tableData" style="width: 100%">
        <el-table-column label="序号" width="60" align="center">
          <template slot-scope="scope"> {{ scope.$index + 1 }} </template>
        </el-table-column>
        <el-table-column
          prop="id"
          label="课程id"
          width="120"
          align="center"
          :key="1"
        >
        </el-table-column>
        <el-table-column
          prop="courseName"
          label="广告名称"
          align="center"
          :key="2"
        >
        </el-table-column>

        <el-table-column
          prop="courseSort"
          label="广告排序"
          align="center"
          :key="3"
        >
        </el-table-column>
        <el-table-column
          v-if="activeName != '1'"
          width="500"
          prop="courseType"
          label="推荐类型"
          align="center"
          :key="4"
        >
        </el-table-column>
        <el-table-column
          width="500"
          label="轮播大图"
          align="center"
          v-else
          :key="5"
        >
          <template slot-scope="scope">
            <img class="course-img" :src="scope.row.courseImg" alt="" />
          </template>
        </el-table-column>
        <el-table-column label="操作" width="250" align="center" :key="6">
          <template slot-scope="scope">
            <el-button size="mini" @click="handleEdit(scope.row)" type="primary"
              >编辑</el-button
            >
            <el-button
              size="mini"
              @click="handleDelete(scope.row)"
              type="danger"
              >删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>
    </el-card>
    <el-dialog :title="title" :visible.sync="dialogVisible" width="50%">
      <el-form v-if="title == '课程信息'" label-width="50">
        <el-form-item label="推荐类型" v-if="activeName != '1'">
          <el-select v-model="courseInfo.courseType" placeholder="请选择">
            <el-option
              v-for="(item, index) in [
                '推荐',
                '前端开发',
                '后端开发',
                '移动开发',
                '计算机基础',
              ]"
              :key="index"
              :label="item"
              :value="item"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="广告排序">
          <el-input
            class="sort-input"
            v-model="courseInfo.courseSort"
            placeholder="请输入广告排序"
          ></el-input>
        </el-form-item>
        <course-image
          v-if="activeName == '1'"
          v-model="courseInfo.courseImg"
          label="轮播大图"
          :limit="10"
        ></course-image>
      </el-form>
      <template v-else>
        <el-input
          placeholder="请输入课程名进行搜索"
          v-model="searchName"
          class="input-with-select"
          clearable
          @clear="searchCourse"
          @keyup.enter.native="searchCourse"
        >
          <el-button
            @click="searchCourse"
            slot="append"
            icon="el-icon-search"
          ></el-button>
        </el-input>

        <el-table :data="allCourse" class="inner-table">
          <el-table-column prop="id" label="id" align="center">
          </el-table-column>
          <el-table-column prop="courseName" label="课程名" align="center">
          </el-table-column>
          <el-table-column label="操作" align="center">
            <template slot-scope="scope">
              <el-button size="mini" @click="pushAdd(scope.row)" type="primary"
                >添加</el-button
              >
            </template>
          </el-table-column>
        </el-table>
      </template>
      <el-pagination
        v-if="title != '课程信息'"
        @current-change="searchCourse"
        :current-page.sync="smallPage"
        :page-size="5"
        layout="total, prev, pager, next, jumper"
        :total="smallTotal"
        class="inner-pagination"
      >
      </el-pagination>
      <span slot="footer" class="dialog-footer">
        <el-button @click="handleCancel">取 消</el-button>
        <el-button type="primary" @click="handleSuccess">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import {
  getAdvCourse,
  getAllNewCourse,
  getAllGootCourse,
  getAllLearnRouteCourse,
} from "@/services/advert";
import {
  addAdvCourse,
  addNewCourse,
  addGoodCourse,
  addLearnRouteCourse,
} from "@/services/advert";
import {
  editAdvCourse,
  editNewCourse,
  editGoodCourse,
  editLearnRouteCourse,
} from "@/services/advert";
import {
  delAdvCourse,
  delNewCourse,
  delGoodCourse,
  delLearnRouteCourse,
} from "@/services/advert";
import CourseImage from "./components/CourseImage";
import { getUnfreeCourseInfo } from "@/services/course";
export default {
  name: "AdvertIndex",
  components: {
    CourseImage,
  },
  data() {
    return {
      activeName: "1",
      tableData: [],
      dialogVisible: false,
      courseInfo: {
        courseSort: "",
        courseType: "",
        courseImg: "",
      },
      title: "",
      searchName: "",
      allCourse: [],
      addCourseType: "推荐",
      smallPage: 1,
      smallTotal: 0,
    };
  },

  methods: {
    handleCreate() {
      this.searchCourse();
      this.title = "添加广告";
      this.searchName = "";
      this.allCourse = [];
      this.dialogVisible = true;
    },
    async searchCourse() {
      const { data } = await getUnfreeCourseInfo({
        page: this.smallPage,
        pageSize: 5,
        searchName: this.searchName,
      });
      if (data.data) {
        this.smallTotal = data.data.total;
        this.allCourse = data.data.courseInfos;
      }
    },
    async pushAdd(row) {
      if (this.tableData.some((item) => item.courseId == row.id)) {
        this.$message.warning("该课程已在广告位中！");
        return;
      }
      const course = {
        courseId: row.id,
        courseName: row.courseName,
        courseSort: 1,
        courseType: this.addCourseType,
      };
      if (this.activeName == "1") {
        var { data } = await addAdvCourse(course);
      } else if (this.activeName == "2") {
        var { data } = await addNewCourse(course);
      } else if (this.activeName == "3") {
        var { data } = await addGoodCourse(course);
      } else if (this.activeName == "4") {
        var { data } = await addLearnRouteCourse(course);
      }
      if (data.msg) {
        this.loadAllAdv();
        this.$message.success(data.msg);
        // this.dialogVisible = false;
      }
    },
    // 获取所有菜单信息
    async loadAllAdv() {
      if (this.activeName == "1") {
        const { data } = await getAdvCourse();
        if (data.data) {
          this.tableData = data.data;
        }
      } else if (this.activeName == "2") {
        const { data } = await getAllNewCourse();
        if (data.data) {
          this.tableData = data.data.filter(
            (item) => item.courseType == this.addCourseType
          );
        }
      } else if (this.activeName == "3") {
        const { data } = await getAllGootCourse();
        if (data.data) {
          this.tableData = data.data.filter(
            (item) => item.courseType == this.addCourseType
          );
        }
      } else if (this.activeName == "4") {
        const { data } = await getAllLearnRouteCourse();
        if (data.data) {
          this.tableData = data.data.filter(
            (item) => item.courseType == this.addCourseType
          );
        }
      }
    },
    handleEdit(rowData) {
      this.title = "课程信息";
      Object.keys(rowData).forEach((key) => {
        this.courseInfo[key] = rowData[key];
      });
      this.dialogVisible = true;
    },
    async pushEdit() {
      if (this.activeName == "1") {
        var { data } = await editAdvCourse(this.courseInfo);
      } else if (this.activeName == "2") {
        var { data } = await editNewCourse(this.courseInfo);
      } else if (this.activeName == "3") {
        var { data } = await editGoodCourse(this.courseInfo);
      } else if (this.activeName == "4") {
        var { data } = await editLearnRouteCourse(this.courseInfo);
      }
      if (data.msg) {
        this.loadAllAdv();
        this.$message.success(data.msg);
      }
    },
    handleDelete(row) {
      this.$confirm("此操作将删除该课程, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
        center: true,
      })
        .then(async () => {
          if (this.activeName == "1") {
            var { data } = await delAdvCourse({ courseId: row.id });
          } else if (this.activeName == "2") {
            var { data } = await delNewCourse({ courseId: row.id });
          } else if (this.activeName == "3") {
            var { data } = await delGoodCourse({ courseId: row.id });
          } else if (this.activeName == "4") {
            var { data } = await delLearnRouteCourse({ courseId: row.id });
          }
          if (data.msg) {
            this.loadAllAdv();
            this.$message.success(data.msg);
          }
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
    handleSuccess() {
      if (this.title == "课程信息") {
        this.pushEdit();
      } else {
      }
      this.loadAllAdv();
      this.dialogVisible = false;
    },
    handleCancel() {
      this.dialogVisible = false;
    },
  },
  watch: {
    activeName: {
      handler: async function () {
        this.loadAllAdv();
      },
      immediate: true,
    },
  },
  created() {},
};
</script>

<style lang="scss" scoped>
.flex {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

::v-deep .el-tabs__nav-wrap {
  &::after {
    display: none;
  }
}

.course-img {
  height: 100px;
}

.sort-input {
  width: 200px;
}
::v-deep .el-dialog__body {
  display: flex;
  flex-direction: column;
  align-items: center;

  .inner-table {
    width: 100%;
    min-height: 403px;
    margin-top: 10px;
  }
  .inner-pagination {
    margin-top: 20px;
  }
}
</style>

